<template>
<van-popup v-model="order.show" position="bottom" :style="{ height: '100%' }">
  <div class="page">
    <van-nav-bar title="门店订单" left-arrow @click-left="$router.go(-1)"/>
    <van-list class="page-content" v-model="order.page.loading" :finished="order.page.finished" finished-text="没有更多了" @load="order.getList">
      <div class="list-item" v-for="(item, index) in order.list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="item.icon" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.nick || '无昵称' }}</span>
          </div>
          <span class="font-gray" style="font-size: 14px;">用户ID:{{ item.userId }}</span>
        </div>
        <div class="list-group">
          <div class="list-row">
            <div class="list-row" style="width: 50%;">
              <span class="label-text">订单编号</span>
              <span>{{ item.orderId }}</span>
            </div>
            <div class="list-row" style="width: 50%;">
              <span class="label-text">订单费用</span>
              <span class="font-warn">{{ item.realExpense || item.realExpense == 0 ? item.realExpense + '元' : $store.getters.dictTrans.order[item.orderStatus] }}</span>
            </div>
          </div>
          <div class="list-row">
            <div class="list-row" style="width: 50%;">
              <span class="label-text">设备编号</span>
              <span>{{ item.equipmentSn }}</span>
            </div>
            <div class="list-row" style="width: 50%;">
              <span class="label-text">充电宝编号</span>
              <span>{{ item.chargerSn }}</span>
            </div>
          </div>
          <div class="list-row">
            <span class="label-text">租借地点</span>
            <span>{{ item.shopName }}({{ item.rentShopId }})</span>
          </div>
        </div>
        <div class="list-group">
          <div class="list-row">
            <span class="label-text">租借时间</span>
            <span>{{ item.rentTime }}</span>
          </div>
          <div class="list-row" v-if="item.returnTime">
            <span class="label-text">归还时间</span>
            <span>{{ item.returnTime }}</span>
          </div>
          <div class="list-row" v-if="item.payTime">
            <span class="label-text">付款时间</span>
            <span>{{ item.payTime }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</van-popup>  
</template>

<script>
export default {
  data() {
    return {
      order: {
        show: true,
        list: [],
        shopId: '',
        page: {
          page: 1,
          size: 10,
          loading: false,
          finished: false
        },
        showBlank: (shopId) => {
          this.order.shopId = shopId;
          this.order.show = true;
          this.order.page = { page: 1, size: 10, loading: false, finished: false };
          this.order.list = [];
          this.order.getList();
        },
        getList: () => {
          let sPage = JSON.parse(JSON.stringify(this.order.page));
          let page = sPage.page, size = sPage.size;
          this.order.page.loading = true;
          let shopId = this.order.shopId;
          let query = { page, size, shopId };

          this.$axios.get('/api/orderFormController/manageOrderByShopId', query).then(res => {
            let json = res || {}; 
            let list = json.list || [];
            this.order.list.push( ...list );
            let finished = json.isLastPage ? true : false;

            this.order.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
          }).catch((err) => {
            this.order.page.loading = false;
            this.order.page.finished = true;
          });
        }
      }
    };
  },
  created() {
    this.order.showBlank(this.$route.query.shopId);
  }
};
</script>

<style lang="less">
</style>
